<template>
  <div>
    <FilterTable
      height="400"
      :isSelectColumn="false"
      ref="table"
      :columns="columns"
      is-export-excel2
      isMemoryPagination
      :dataSource="data"
      :onColumnsChange="col => (this.columns = col)"
    >
    </FilterTable>
    <div class="dialogBottmView">
      <el-button size="small" type="primary" class="btnStyle" :loading="!!queue.length" @click="submitBtn">提报
      </el-button>
      <el-button size="small" type="primary" class="btnStyle" @click="closeDialog">取消
      </el-button>
    </div>
  </div>
</template>

<script>
import {postUpdateStatus} from '@/api/partsmanage/purchaseManage/purchaseSubmit';
import {dictionary} from '@/utils/dictMixin';

export default {
  name: 'batchSubmit',
  components: {},
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      visible: false,
      columns: this.createTableColumns(),
      data: [],
      status: false,
      queue: [] //任务队列
    };
  },
  props: {
    orders: {
      type: Array,
      default() {
        return []
      }
    }
  },//'single':'multiple' 单选多选
  computed: {
    getfetchParams() {
      return Object.assign({}, this.params, this.fetchParams);
    }
  },
  created() {
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.data = this.orders.map(i => {
      return {
        id: i.id,
        xsddhm: i.xsddhm,
        status: '',
        msg: ''
      };
    });
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '订单号',
          dataIndex: 'xsddhm',
          width: 200,
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          render: props => {
            const status = props.row.status;
            let dom = '';
            if (status == 1) {
              dom = <div>提报中<i class="el-icon-loading" style="margin: 0 5px"/></div>;
            } else if (status == 2) {
              dom = <div>提报成功<i class="el-icon-circle-check" style="margin: 0 5px;color: green;" /></div>;
            } else if (status == 3) {
              dom = <div>提报失败<i class="el-icon-circle-close" style="margin: 0 5px;color: red;"/></div>;
            }
            return dom;
          },
        },
        {
          title: '反馈信息',
          dataIndex: 'msg',
          render: props => {
            return (<span style="color: red;">{props.row.msg}</span>);
          }
        },
      ]
    },
    closeHandler(val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = {...this.fetchParams};
      }
    },
    closeDialog() {
      this.status = false;
      this.$emit('closeDialog')
    },
    async submitBtn() {
      this.status = true;
      this.queue = [...this.data].reverse();
      this.queue.forEach(i=>{
        i.status = '';
        i.msg = '';
      });
      while (this.queue.length&&this.status) {
        const order = this.queue.pop();
        this.saveLoading = true
        try {
          order.status = 1;
          const res = await postUpdateStatus({
            id: order.id,
            xsddzt: 'T'
          });
          if (res.resultCode == 200) {
            if (res.data) {
              order.status = 3;
              order.msg = res.data;
            } else {
              order.status = 2;
            }
          }else{
            order.status = 3;
            order.msg = res.errMsg;
          }
        } catch (e) {
          order.status = 3;
          order.msg = e;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.dialogBottmView {
  text-align: center;
}
</style>
